<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .unit{
            width: 350px;
            margin: auto;
            border-bottom: solid 1px #e9e9e9;
        }
        .content{
            float: left;
            margin-right: 35px;
        }
        .info{
            color: #6c6669;
            margin-top: -10px;
            margin-bottom: 10px;
        }
        .original{
            border: solid 1px #8e8e8e;
            border-radius: 10px;
            padding: 1px 5px;
            font-size: 12px;
        }
    </style>
</head>
<body>

<div id="app">
    <!--<div class="unit">-->
        <!--<div class="content">-->
            <!--<h3>这里是文章标题</h3>-->
            <!--<div class="info">-->
                <!--<span>2018-06-21</span>-->
                <!--<span class="original">原创</span>-->
            <!--</div>-->
        <!--</div>-->
        <!--<img src="11.png">-->
    <!--</div>-->
    <card-detail :detail="article" v-for="article in articles"></card-detail>
</div>
<script>
    Vue.component('card-detail',{
        props:['detail'],
        template:`<div class="unit">
        <div class="content">
            <h3>{{detail.title}}</h3>
            <div class="info">
                <span>{{detail.date}}</span>
                <span v-if="detail.originalFlag" class="original">原创</span>
            </div>
        </div>
        <img :src="detail.imgUrl">
    </div>`
    })
    let vm = new Vue({
        el:'#app',
        data:{
            articles:[
                {
                    title: '这里是文章标题1111',
                    date: '2018-06-10',
                    originalFlag: true,
                    imgUrl: '11.png',
                },
                {
                    title: '这里是文章标题2222',
                    date: '2018-06-11',
                    originalFlag: false,
                    imgUrl: '11.png',
                },
                {
                    title: '这里是文章标题3333',
                    date: '2018-06-12',
                    originalFlag: true,
                    imgUrl: '11.png',
                },
                {
                    title: '这里是文章标题444',
                    date: '2018-06-18',
                    originalFlag: false,
                    imgUrl: '11.png',
                },
            ]
        }
    })
</script>

</body>
</html>